<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom操作</title>
</head>
<body>
	<ul id="myList">
	</ul>
	<script type="text/javascript">
		// let element = document.getElementById('myList');
		// for (var i = element.childNodes.length - 1; i >= 0; i--) {
		// 	console.info(element.childNodes[i].nodeType);
		// 	if (element.childNodes[i].nodeType === 1) {
		// 		console.info('xxx');
		// 	}
		// }
		// 如果逐个的添加到列表项将导致浏览器反复的渲染，
		// 使用一个文档片段来保存创建的列表项，一次将他们添加到文档中。
		let fragment = document.createDocumentFragment();
		let ul = document.getElementById('myList');
		let li = null;

		for (var i = 3; i >= 0; i--) {
			li = document.createElement('li');
			li.appendChild(document.createTextNode('item' + (i+1)));
			fragment.appendChild(li);
		}

		ul.appendChild(fragment);
	</script>
</body>
</html>